<h1 role="toolbar" class="dialog-header">
	<button type="button" class="closeButton">
		<svg role="img">
			<title>Close</title>
			<use xlink:href="images/icons/clear.svg#icon" href="images/icons/clear.svg#icon"></use>
		</svg>
	</button>
	PaintZ Help
</h1>
<table>
	<tr>
		<td colspan="2">
			<img src="images/toolbar_overview.png" alt="screenshot of the PaintZ toolbar with the drawing tools, tool settings, color palette, and help icon highlighted." style="display: block; width: 100%;" />
		</td>
	</tr>
	<tr><td colspan="2">&nbsp;</td></tr>
	<tr>
		<th colspan="2">Document actions</th>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>clear icon</title>
				<use xlink:href="images/icons/clear.svg#icon" href="images/icons/clear.svg#icon"></use>
			</svg>
		</td>
		<td>
			Clear your current drawing and start over.
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>open icon</title>
				<use xlink:href="images/icons/open.svg#icon" href="images/icons/open.svg#icon"></use>
			</svg>
		</td>
		<td>
			Open a new image for editing.  Shortcut key: <kbd>Ctrl</kbd>+<kbd>O</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>save icon</title>
				<use xlink:href="images/icons/save.svg#icon" href="images/icons/save.svg#icon"></use>
			</svg>
		</td>
		<td>
			Save your current drawing to your computer.  Shortcut key: <kbd>Ctrl</kbd>+<kbd>S</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>undo icon</title>
				<use xlink:href="images/icons/undo.svg#icon" href="images/icons/undo.svg#icon"></use>
			</svg>
		</td>
		<td>
			Undo your last change.  Shortcut key: <kbd>Ctrl</kbd>+<kbd>Z</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>redo icon</title>
				<use xlink:href="images/icons/redo.svg#icon" href="images/icons/redo.svg#icon"></use>
			</svg>
		</td>
		<td>
			Redo the last change you undid.  Shortcut key: <kbd>Ctrl</kbd>+<kbd>Y</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>resize icon</title>
				<use xlink:href="images/icons/resize.svg#icon" href="images/icons/resize.svg#icon"></use>
			</svg>
		</td>
		<td>
			Crop or scale your drawing.
		</td>
	</tr>
	<tr><td colspan="2">&nbsp;</td></tr>
	<tr>
		<th colspan="2">
			Tools
		</th>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>pencil icon</title>
				<use xlink:href="images/icons/pencil.svg#icon" href="images/icons/pencil.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw single pixels in the current line color.  Right-click to use the current fill color.  Shortcut key: <kbd>P</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>brush icon</title>
				<use xlink:href="images/icons/brush.svg#icon" href="images/icons/brush.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw any shape you want in the current line color.  Right-click to use the current fill color.  Shortcut key: <kbd>B</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>airbrush icon</title>
				<use xlink:href="images/icons/airbrush.svg#icon" href="images/icons/airbrush.svg#icon"></use>
			</svg>
		</td>
		<td>
			Spray paint in the current line color.  Right-click to use the current fill color.
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>line icon</title>
				<use xlink:href="images/icons/line.svg#icon" href="images/icons/line.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw a straight line in the current line color.  Right-click to use the current fill color.  Shortcut key: <kbd>L</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>curve icon</title>
				<use xlink:href="images/icons/curve.svg#icon" href="images/icons/curve.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw a line in the current line color, then turn it into a curve.  Right-click to use the current fill color.  Shortcut key: <kbd>C</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>rectangle icon</title>
				<use xlink:href="images/icons/rect.svg#icon" href="images/icons/rect.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw a rectangle.  Right-click to swap the line and fill colors.  Shortcut key: <kbd>R</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>oval icon</title>
				<use xlink:href="images/icons/oval.svg#icon" href="images/icons/oval.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw an oval.  Right-click to swap the line and fill colors.  Shortcut key: <kbd>O</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>pan icon</title>
				<use xlink:href="images/icons/pan.svg#icon" href="images/icons/pan.svg#icon"></use>
			</svg>
		</td>
		<td>
			Grab and pan around your drawing by clicking and dragging.  Shortcut key: <kbd>H</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>selection icon</title>
				<use xlink:href="images/icons/select.svg#icon" href="images/icons/select.svg#icon"></use>
			</svg>
		</td>
		<td>
			Select a rectangular section of your drawing to move (click and drag), duplicate (<kbd>Ctrl</kbd>+<kbd>D</kbd>), or delete (<kbd>Backspace</kbd>/<kbd>Delete</kbd>).  Shortcut key: <kbd>S</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>freeform selection icon</title>
				<use xlink:href="images/icons/freeform_select.svg#icon" href="images/icons/freeform_select.svg#icon"></use>
			</svg>
		</td>
		<td>
			Draw a shape to select that section of your drawing to move (click and drag), duplicate (<kbd>Ctrl</kbd>+<kbd>D</kbd>), or delete (<kbd>Backspace</kbd>/<kbd>Delete</kbd>).  Shortcut key: <kbd>F</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>eraser icon</title>
				<use xlink:href="images/icons/eraser.svg#icon" href="images/icons/eraser.svg#icon"></use>
			</svg>
		</td>
		<td>
			Cover any part of your drawing with the current fill color.  Right-click to use the current line color.  Shortcut key: <kbd>E</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>flood fill icon</title>
				<use xlink:href="images/icons/paint_bucket.svg#icon" href="images/icons/paint_bucket.svg#icon"></use>
			</svg>
		</td>
		<td>
			Fill the section with the current line color.  Right-click to use the current fill color.  Shortcut key: <kbd>K</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>eyedropper icon</title>
				<use xlink:href="images/icons/eyedropper.svg#icon" href="images/icons/eyedropper.svg#icon"></use>
			</svg>
		</td>
		<td>
			Select a color in your drawing to use it as the line color.  Right-click to select the fill color instead. Shortcut key: <kbd>I</kbd>
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>text icon</title>
				<use xlink:href="images/icons/text.svg#icon" href="images/icons/text.svg#icon"></use>
			</svg>
		</td>
		<td>
			Add text to your drawing in the current line color.  Shortcut key: <kbd>T</kbd>
		</td>
	</tr>
	<tr><td colspan="2">&nbsp;</td></tr>
	<tr>
		<th colspan="2">
			PaintZ actions
		</th>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>full screen icon</title>
				<use xlink:href="images/icons/full_screen.svg#icon" href="images/icons/full_screen.svg#icon"></use>
			</svg>
		</td>
		<td>
			Show off your drawing in full screen mode.
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>settings icon</title>
				<use xlink:href="images/icons/settings.svg#icon" href="images/icons/settings.svg#icon"></use>
			</svg>
		</td>
		<td>
			Customize PaintZ settings.
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>information icon</title>
				<use xlink:href="images/icons/info.svg#icon" href="images/icons/info.svg#icon"></use>
			</svg>
		</td>
		<td>
			View information about PaintZ.
		</td>
	</tr>
	<tr>
		<td>
			<svg role="img" class="helpIcon">
				<title>help icon</title>
				<use xlink:href="images/icons/help.svg#icon" href="images/icons/help.svg#icon"></use>
			</svg>
		</td>
		<td>
			Open this help page.
		</td>
	</tr>
</table>
<div class="dialog-footer">
	<button type="submit">Close</button>
</div>
